<template>
  <div class="app-container calendar-list-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form ref="form1" :inline="true" >
          <el-form-item label="姓名">
            <el-input clearable style="width: 150px;" placeholder="请输入姓名" v-model.trim="listQuery.user_name">
            </el-input>
          </el-form-item>
          <el-form-item label="抽奖时间">
            <el-date-picker type="daterange" value-format="yyyy-MM-dd" v-model="listQuery.searchDate" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input clearable style="width: 150px;" placeholder="请输入手机号" v-model.number="listQuery.phone">
            </el-input>
          </el-form-item>
          <el-form-item label="奖项等级">
            <el-input clearable style="width: 150px;" placeholder="请输入奖项等级" v-model.trim="listQuery.item_name">
            </el-input>
          </el-form-item>
          <el-button class="filter-item" type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form>
    </div>
    <el-row class="filter-container">
        <el-button style="float: right" size="small" type="primary" @click="templateDown">导出</el-button>
    </el-row>
    <!-- 查询结果 -->
    <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row>
      <el-table-column align="center" label="姓名" prop="user_name" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="手机号" prop="phone" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="获奖时间" prop="create_time">
      </el-table-column>
      <el-table-column align="center" label="奖项等级" prop="item_name">
      </el-table-column>     
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
  </div>
</template>

<script>
import { drawRecord_list,drawRecord_exportExcel } from '@/api/drawRecord'
import { searchTool } from '@/utils'
import SoPagination from '@/components/SoPagination'
import axios from 'axios'

export default {
  name: 'other_list',
  components: { SoPagination },
  data() {
    return {
      loading: false,
      tableList: [],
      listQuery: { start: 0, limit: 10, total: 0, current: 1 }
    }
  },
  methods: {
    search(){//搜索
      let keyWords = {key: 'searchDate', names: ['create_start_time', 'create_end_time']}
      this.listQuery = searchTool(this.listQuery, keyWords);
      this.initList();
    },
     templateDown(){    //导出文件
      let draw_id=this.$route.query.id
      axios({
        url:`/api/drawRecord/exportExcel?draw_id=${draw_id}`,
        method: 'get',
        responseType: 'arraybuffer',
      }).then(res => {
          let url = window.URL.createObjectURL(new Blob([res.data],{type:'application/vnd.ms-excel'}));
          console.log(url);
          let link = document.createElement("a");
          // let fileName = res.headers['content-disposition'].match(/fushun(\S*)xls/)[0];
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", `${this.$route.query.active_title}-中奖名单.xls`);
          document.body.appendChild(link);
          link.click();
          this.$message({
            message: "导出成功",
            type: "success"
          });
      }).catch(function(res) {});
    },
    async initList() {
      this.loading = true;
      let args = {
        draw_id: this.$route.query.id,
        company_id: localStorage.getItem("companyId")
      }
      const query = {...this.listQuery, ...args};
      const { data } = await drawRecord_list(query);
      this.loading = false
      if(data.status == 100){
        this.tableList = data.data.rows;
        this.listQuery.total = data.data.results
      }
    }
  },
  created() {
    this.initList()
  }
}
</script>
